<template>
  <div class="deit">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 比赛管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>比赛/活动列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="cantainer">
        <el-table
          style="width: 100%;"
          :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="比赛名称" prop="Bsname" width="150"></el-table-column>
          <el-table-column label="举办方" prop="Bssponsor" width="150"></el-table-column>
          <el-table-column label="举办日期" prop="Bstime" width="200"></el-table-column>
          <el-table-column label="比赛地址" prop="Bsaddress" width="200"></el-table-column>
          <el-table-column label="报名方式" prop="Bsmethod" width="300"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
        >，</el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      userList: [],
      // bslist:{
      //   Bsname:this.$cookies.get("data").Bsname,
      //   Bssponsor:this.$cookies.get("data").Bssponsor,
      //   Bstime:this.$cookies.get("data").Bstime,
      //   Bsaddress:this.$cookies.get("data").Bsaddress,
      //   Bsmethod:this.$cookies.get("data").Bsmethod
      // }
    };
  },
  created() {
    this.handleUserList();
    console.log(this.$cookies.get("data"));
    // this.addUserList();
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    handleUserList() {
      this.axios.post("Main/GetCompetitionListByPage", {}).then(res => {
        //这是从本地请求的数据接口，

        this.userList = res.data.Rows;
        console.log(res.data.Rows);
      });
    },
    handleEdit(index, row) {
      this.$router.push({ name: "EditBs" });
      // console.log(index);
      console.log(row);
      // 是需信息写入 cookie 中
      this.$cookies.set("row", JSON.stringify(row));
      console.log(this.$cookies.get("row"));
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.axios
          .post(`/Main/DeleteById?id=${row.CompetitionId}`)
          .then(res => {
            this.$message({
              type: "success",
              message: "删除成功！"
            });
            this.handleUserList();
          })
          .catch(err => {
            this.$message({
              type: "info",
              message: "申请失败！"
            });
          });
      });
    },
    addUserList(){
      this.axios.post('/Main/SaveCompetition',this.bslist).then(res=>{
        // console.log(this.$cookies.remove("data"));
        console.log(添加审核通过社团);
      })
    }
  }
};
</script>

<style>
</style>